import { defineComponent, reactive } from "vue";
import { useRouter } from 'vue-router'
import './style.scss'

export default defineComponent({
  name: 'Tabs',
  setup() {

    const router = useRouter()

    const state = reactive({
      tabsList: [
        {
          name: '推荐',
          path: '/'
        },
        {
          name: '歌手',
          path: '/singer'
        },
        {
          name: '排行榜',
          path: '/rank'
        }
      ],
      currentTabId: 0
    })

    const changeTabId = (index, path) => {
      state.currentTabId = index
      router.push(path)
    }

    const tabsItems = () => state.tabsList.map((item, index) => (
      <a onClick={() => changeTabId(index, item.path)}>
        <span className={[ state.currentTabId === index ? 'active' : null ]}>{ item.name }</span>
      </a>
    ))


    return () => (
      <div className="tabs">
        { tabsItems() }
      </div>
    )
  }
})